<script setup lang="ts">
interface PropsType {
  title?: string
  position: {
    bottom?: number
    top?: number
    height?: number
    width?: number
    right?: number
    left?: number
  }
}
defineProps<PropsType>()
</script>

<template>
  <div
    class="widget-panel"
    :style="{
      height: position.height + 'vh',
      bottom: position.bottom + 'vh',
      width: position.width + 'px',
      top: position.top + 'vh',
      left: position.left + 'px',
      right: position.right + 'px'
    }">
    <div class="widget-panel-header">
      <div v-if="title" class="widget-panel-title">{{ title }}</div>
      <slot name="header"></slot>
    </div>
    <div class="widget-panel-main">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.widget-panel {
  position: absolute;
  box-sizing: border-box;
  width: 20vw;
  padding: 10px 15px;
  // overflow: auto;
  background:
    linear-gradient(#2a3342, #2a3342) left -3px top 0,
    linear-gradient(#2a3342, #2a3342) left -3px top -3px,
    linear-gradient(#2a3342, #2a3342) right -3px top 0,
    linear-gradient(#2a3342, #2a3342) right -3px top -3px,
    linear-gradient(#2a3342, #2a3342) left -3px bottom 0,
    linear-gradient(#2a3342, #2a3342) left -3px bottom -3px,
    linear-gradient(#2a3342, #2a3342) right -3px bottom 0,
    linear-gradient(#2a3342, #2a3342) right -3px bottom -3px;
  background-color: #04263797;
  background-repeat: no-repeat;
  background-size:
    20px 20px,
    20px 20px;
  background-size:
    3px 16px,
    16px 3px;
  backdrop-filter: blur(1px);
  border: 3px solid transparent;

  .widget-panel-header {
    display: flex;
    justify-content: space-between;

    .widget-panel-title {
      height: 30px;
      margin-bottom: 5px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }

  .widget-panel-main {
    height: calc(100% - 35px);
    // overflow: auto;
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  background-color: #cfcdc8;
  border-radius: 100px;
}
</style>
